<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>  
		</view>  
		<!-- #endif --> 	
		<uni-nav-bar fixed="true" left-icon="false" :status-bar="true" :border="false" :title="UserInfo.nick_name" class="NavBar" @clickLeft="NavBar()">
			<!-- <view slot="right" @click="cut()"></view> -->
		</uni-nav-bar>
		<!-- <uni-nav-bar :status-bar="false"  :border="false"  >
			<view class="NavBox flex">
				
				<view class="flex ListBox">
					<view class="NavList">{{UserInfo.nick_name}}</view>
				</view>
				
			</view>
			
		</uni-nav-bar> -->
		
		<view class="UserInfo flex">
			<view class="portrait1">
				<image :src="UserInfo.member_avatar||'/static/images/userImg111.png'" mode=""></image>
			</view>
			<view class="" style="margin-left: 50rpx;">
				<view class="flex InfoBox">
					<view class="">
						<view class="Num">{{UserInfo.follow_num}}</view>
						<view class="">关注</view>
					</view>
					<view class="">
						<view class="Num">{{UserInfo.fans_num}}</view>
						<view class="">粉丝</view>
					</view>
					<view class="">
						<view class="Num">{{UserInfo.like_num}}</view>
						<view class="">获赞</view>
					</view>
				</view>
				<view class="edit" @click="edit()">编辑资料</view>
			</view>
		</view>
		
		
		<view class="FunBox">
			<view class="Title">直播中心</view>
			<view class="flex">
				
				<view class="FunList flex wrap" @click="Tojb()">
					<view class=""><image src="/live/static/images/jb.png" mode=""></image></view>
					<view class="">我的金币</view>
				</view>
				<view class="FunList flex wrap" @click="TOds()">
					<view class=""><image src="/live/static/images/lw.png" mode=""></image></view>
					<view class="">打赏记录</view>
				</view>
				<view class="FunList flex wrap" @click="applyTv()">
					<view class=""><image src="../../static/images/TvIco.png" mode=""></image></view>
					<view class="">申请直播</view>
				</view>
				<!-- <view class="FunList flex wrap">
					<view class=""><image src="../../static/images/enterprise.png" mode=""></image></view>
					<view class="">企业入驻</view>
				</view> -->
			</view>
		</view>
		
		<view class="TvBox">
			<view class="flex">
				<view class="Nav" v-for="(item,index) in TabNav" :key="index" :class="num==index?'choice':''" @click="NavBtn(index)"><text>{{item}}</text></view>
			</view>
			
			
			<view class="TvBox2 flex wrap" v-if="num==0">
				<view class="TvList" v-for="(item,index) in videoList" :key="index" style="position: relative;">
					
					<view class="" style="position: absolute;top: 0;right: 0;z-index: 999;background-color: #EE5BAB;line-height:50rpx;padding: 0 10rpx;color: #FFFFFF;" @click="dele(item.id)">删除</view>
					<view class="BgImg"><image style="width: 100%;height: 100%;" :src="item.cover_url" mode=""></image></view>
					<view class="Info">
						<view class="Title" style="color: #FFFFFF;">{{item.title}}</view>
						<view class="flex"  style="color: #FFFFFF;">
							<view class="texthide">{{item.member_name}}</view>
							<view class="">
								<view class=""><image style="width: 30rpx" src="../../static/images/audienceIco.png" mode="widthFix"></image>{{item.visits}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
			
			
			
			
			<view style="background-color: #EEEEEE;" v-if="num==1">
				<view class="InfoBox2" v-for="(item,index) in InfoList" :key="index">
					<view class="flex">
						<view class="portrait">
							<image :src="item.note_member_avatar" mode=""></image>
						</view>
						<view class="UserInfo">
							<view class="Name">{{item.note_member_name}}</view>
							<view class="Item">{{item.add_time |formaDate}}</view>
						</view>
						<view style="width: 80rpx;">
							
						</view>
						<!-- <view class="follow" :class="item.had_liked?'bgeee':''" @click="follow(item.note_member_id,index,item.had_liked)">{{item.had_liked?'已关注':'+关注'}}</view> -->
					</view>
					<view class="Title">{{item.note_title}}</view>
					<view class="content">
						{{item.note_content}}
					</view>
					
					<view class="flex" style="justify-content: start;flex-wrap: wrap;" @click="Todetails(item.note_id)" >
						<view class="ImgBox "   v-for="(item2,index2) in item.note_image" :key="index2" >
							<image :src="item2.url" mode="widthFix" ></image>
						</view>
					</view>
					
					<view class="" style="width: 100%;overflow-x: scroll;overflow-y: hidden; display: -webkit-inline-box;">
							<view class="shopBox flex" v-for="(item2,index2) in item.note_goods" style="" :key="index2">
								<view class="shopImg">
									<image :src="item2.goods_image_thumb" mode=""></image>
								</view>
								<view class="InfoBox2">
									<view class="shopName textHide">{{item2.goods_name}}</view>
									<view class="Price">￥{{item2.goods_price}}</view>
								</view>
							</view>
					</view>
					<view class="flex operationBox">
						<view class="">
						</view>
						<view class="operation flex">
						
							<view class="">
								<image src="../../static/images/dzIco.png" mode=""  ></image>
								<text>{{item.zan_count}}</text>
							</view>
							<view class=""  @click="Todetails(item.note_id)">
								<image src="../../static/images/commentIco.png" mode=""></image>
								<text>{{item.comment_count}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<tab-bar :num="4"></tab-bar>
	</view>
</template>

<script>
	import TabBar from '../../TabBar/TabBar'
	export default {
		components:{TabBar},
		data() {
			return {
				TabNav:["视频","动态"],
				num:0,
				UserInfo:"",
				videoList:"",
				InfoList:""
			}
		},
		onShow() {
			this.getInfo();
			this.getvideoList();
		},
		onLoad() {
			
		},
		methods: {
			Todetails(note_id){
				uni.navigateTo({
					url:"/live/dynamic/details?note_id="+note_id
				})
			},
			getList(state){//获取动态列表
				this.$util.request({
					url: '/live/index.php?act=api-video&op=mylast',
					method: 'get',
					data: {
						// member_id:584214
						curpage:this.curpage,
						},
				}).then((res)=>{
					if (res.error_code == 0) {
						if(state){
							this.InfoList=this.InfoList.concat(res.datas.notes)  
						}else{
							this.InfoList=res.datas.notes
						}
						
						if(res.datas.hasmore){
							this.curpage++
						}else{
							this.curpage=false
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			Tojb(){
				uni.navigateTo({
					url:"/live/user/manage/Goldcoin"
				})
			},
			TOds(){
				uni.navigateTo({
					url:"/live/user/manage/Reward"
				})
			},
			dele(id){
				let that=this
				uni.showModal({
					title: '提示',
					content: '是否删除改视频？',
					cancelText:"取消",//取消按钮文字
					confirmText:"删除",//确认按钮文字
					success: function(res2) {
						if (res2.confirm) {
							// alert("删除")
							that.$util.request({
								url: '/live/index.php?act=video&op=delVideoInfo',
								method: 'get',
								data: {
									video_record_id:id
								},
							}).then((res)=>{
								if (res.error_code == 0) {
									that.getvideoList()
								} else {
									uni.showToast({
										title: res.message,
										icon: "none"
									});
								}
							})
							
						} else if (res2.cancel) {
							
						}
					}
				});
			},
			applyTv(){
				uni.navigateTo({
					url:"/live/user/apply/apply_live"
				})
			},
			getvideoList(){
				this.$util.request({
					url: '/live/index.php?act=api-video&op=getVideoList',
					method: 'get',
					data: {
						member_id:uni.getStorageSync('api_member_id')
					},
				}).then((res)=>{
					if (res.error_code == 0) {
						this.videoList=res.datas.list
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			getInfo(){
				this.$util.request({
					url: '/live/index.php?act=api-member_live&op=getMineInfo',
					method: 'get',
					data: {},
				}).then((res)=>{
					if (res.error_code == 0) {
						this.UserInfo=res.datas.info
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			edit(){
				uni.navigateTo({
					url:"/live/user/manage/setinfo"
				})
			},
			NavBtn(index){
				this.num=index
				if(index==0){
					this.getvideoList();
				}else if(index==1){
					this.getList()
				}
			}
		}
	}
</script>

<style>
	.texthide{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		width: 180rpx;
	}
	.Info .Title{
		font-weight: bold;
	}
	.Info{
		position: absolute;
		bottom: 0;
		z-index: 10;
		width: 100%;
		padding:5rpx 10px;
		/* color: #FFFFFF; */
		box-sizing: border-box;
	}
	.audience{
		position: absolute;
		top: 0;
		z-index: 10;
		width: 100%;
		padding:5rpx 10px;
		color: #FFFFFF;
		box-sizing: border-box;
	}
	.BgImg{
		width: 345rpx;
		height: 420rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
	}
	.TvList{
		width: 345rpx;
		height: 420rpx;
		border-radius: 20rpx;
		overflow: hidden;
		border:1rpx solid #EEEEEE;
		margin-bottom: 20rpx;
		position: relative;
	}
	/* .TvBox2{
		margin: 20rpx;
	} */
	.TvBox .choice text{
		height: 50rpx;
		display: inline-block;
		border-bottom: 6rpx solid #FE3B6B;
	}
	.Nav{
		width: 50%;
		text-align: center;
		color: #333333;
		line-height: 50rpx;
		font-weight: bold;
		font-size: 30rpx;
	}
	.TvBox{
		background-color: #FFFFFF;
		padding: 20rpx;
	}
	.FunList image{
		width: 50rpx;
		height: 50rpx;
	}
	.FunList{
		width: 120rpx;
		font-size: 24rpx;
		justify-content: center !important;
	}
	.FunBox .Title{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.FunBox{
		background-color: #FFFFFF;
		margin: 20rpx 0;
		padding: 20rpx 40rpx;
	}
	.edit{
		width: 320rpx;
		line-height: 50rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #FE3B6B;
		border-radius: 30rpx;
	}
	.InfoBox .Num{
		font-size: 36rpx;
		color: #333333;
		line-height: 40rpx;
	}
	.InfoBox{
		width: 320rpx;
		text-align: center;
	}
	.portrait1 image{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		margin-right: 50rpx;
		border: 1rpx solid #EEEEEE;
	}
	.UserInfo{
		padding: 20rpx 60rpx 40rpx;
		justify-content:flex-start !important;
		background-color: #FFFFFF;
	}
	.ListBox{
		width:500rpx;
		text-align: center;
	}
	.NavList{
		font-size: 36rpx;
		color: #000000;
		/* width: 50%; */
		width: 600rpx;
		text-align:center;
	}
	.NavBox{
		/* margin-top: 30rpx; */
		font-weight: bold;
		border-bottom: 1rpx solid #999999;
	}
	.Navsearch{
		width: 50rpx;
		height: 50rpx;
		overflow: hidden;
		margin-left: 80rpx;
	}
	
	
	.flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrap{
		flex-wrap: wrap;
	}
	.operation{
		width: 350rpx;
	}
	.operation image{
		width: 35rpx;
		height: 35rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}
	.operationBox{
		margin-top: 20rpx;
	}
	.shopBox .shopName{
		line-height: 40rpx;
	}
	.shopBox .Price{
		line-height: 40rpx;
	}
	.shopImg image{
		width: 100rpx;
		height: 100rpx;
		margin-right: 10rpx;
	}
	.textHide{
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 340rpx;
		overflow: hidden;
	}
	.shopBox{
		width: 500rpx;
		height: 100rpx;
		background-color: #F8F8F8;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.InfoBox2 .ImgBox image{
		width: 210rpx;
		height: 210rpx;
		border: 1rpx solid #EEEEEE;
	}
	.InfoBox2 .ImgBox{
		margin: 10rpx 0;
	}
	.content{
		text-indent:2em;
		font-size: 26rpx;
		line-height: 36rpx;
		color: #333333;
	}
	.Title{
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin: 10rpx 0;
		width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.InfoBox2 .follow{
		background-color: #ff3355;
		color: #FFFFFF;
		border-radius: 30rpx;
		padding: 0 20rpx;
		margin-right: 20rpx;
	}
	.UserInfo2 .Name{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: 30rpx;
	}
	.UserInfo2 .Item{
		font-size: 24rpx;
	}
	.UserInfo2{
		width: 400rpx;
	}
	.InfoBox2{
		margin: 20rpx 0;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.portrait{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.portrait image{
		width: 100rpx;
		height: 100rpx;
	}
	.status_bar {
	    height: var(--status-bar-height);  
	    width: 100%;  
	    background-color: #FFFFFF;
	}  
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    position: fixed;  
	    background-color: #FFFFFF; 
	    top: 0;  
	    z-index: 999;  
	}
</style>
